<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Real Plot a Real Estates Category Bootstrap Responsive
	Website Template | Home :: w3layouts</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Real Plot Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"
	media="all">
<!--fonts-->
<link
	href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700"
	rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900"
	rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Courgette"
	rel="stylesheet">
<!--//fonts-->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!--light-box-files -->
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.chocolat.js"></script>
<link rel="stylesheet" href="css/chocolat.css" type="text/css"
	media="screen">
<!--//light-box-files -->
<script type="text/javascript">
	$(function() {
		$('.gallery a').Chocolat();
	});
</script>
<!-- //js -->
<script src="js/responsiveslides.min.js"></script>
<script>
	$(function() {
		$("#slider").responsiveSlides({
			auto : true,
			pager : true,
			nav : true,
			speed : 1000,
			namespace : "callbacks",
			before : function() {
				$('.events').append("<li>before event fired.</li>");
			},
			after : function() {
				$('.events').append("<li>after event fired.</li>");
			}
		});
	});
</script>


<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event) {
			$('html,body').animate({
				scrollTop : $(this.hash).offset().top
			}, 1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
	<!--Header-->
	<div class="header">
		<!--Top-Bar-->
		<div class="top-bar">
			<div class="container">
				<div class="header-nav">
					<nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<h1>
							<a class="navbar-brand" href="index.html">Real Plot</a>
						</h1>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse nav-wil"
						id="bs-example-navbar-collapse-1">
						<nav class="linkEffects linkHoverEffect_12">
						<ul>
						<li><a class="active" href="index"><span>首页</span></a></li> 
										<li><a class="scroll" href="Team.jsp"><span>教师团队</span></a></li>  
										<li><a class="scroll" href="Course.jsp"><span>课程介绍</span></a></li> 
										<li><a class="scroll" href="userdetail.jsp"><span>个人中心</span></a></li> 
										<li><a class="scroll" href="Login.jsp"><span>登录</span></a></li> 
						</ul>
						</nav>
					</div>
					</nav>
				</div>
			</div>
		</div>
		<!--//Top-Bar-->

		<!--Slider-->
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides" id="">
					<li>
						<div class="slider-img">
							<img src="images/bannerteacher.jpg" class="img-responsive"
								alt="Real Plot">
						</div>
						<div class="slider-info">
							<span class="italic">Neque porro quisquam</span>
							<h4>孩子喜欢老师好 </h4>
							<h3>在线辅导更有效</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
						</div>
					</li>
				</ul>

			</div>
			<div class="clearfix"></div>
		</div>
		<!--//Slider-->
	</div>
	<!--//Header-->
	<!--offer-->
	<div class="offer-w3layouts" id="about">
		<div class="container">
			<div class="offer-header-agile">
				<h3 class="tittle">
					大数据驱动学习
				</h3>
				<p>课前到课后全程精细分析 学习效率翻番</p>
			</div>
			<div class="row">
				<div class="col-md-4 offer-grid ">
					<div class="icon">
						<i class="fa fa-star-o" aria-hidden="true"></i>
					</div>
					<h4>海量数据</h4>
					<p>2700万学生学习数据 比学校更懂你</p>
					<div class="readmore-w3">
						<a class="readmore" href="#" data-toggle="modal"
							data-target="#myModal2">Read More</a>
					</div>
					<!-- Modal2 -->
					<div class="modal fade" id="myModal2" role="dialog">
						<div class="modal-dialog">
							<!-- Modal content-->
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h4>Aenean sagittis</h4>
									<h5>Lorem Ipsum</h5>
									<p>Lorem Ipsum is simply dummy text of the printing and
										typesetting industry. Lorem Ipsum has been the industry's
										standard dummy text ever since the 1500s, when an unknown
										printer took a galley of type and scrambled it to make a type
										specimen book. It has survived not only five centuries, but
										also the leap into electronic typesetting, remaining
										essentially unchanged. It was popularised in the 1960s with
										the release of Letraset sheets containing Lorem Ipsum
										passages, and more recently with desktop publishing software
										like Aldus PageMaker including versions of Lorem Ipsum. There
										are many variations of passages of Lorem Ipsum available, but
										the majority have suffered alteration in some form, by
										injected humour, or randomised words which don't look even
										slightly believable. If you are going to use a passage of
										Lorem Ipsum, you need to be sure there isn't anything
										embarrassing hidden in the middle of text.</p>
								</div>
							</div>
						</div>
					</div>
					<!-- //Modal2 -->
				</div>
				<div class="col-md-4 offer-grid ">
					<div class="icon">
						<i class="fa fa-map-o" aria-hidden="true"></i>
					</div>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Mauris ut metus sit amet magna vehicula eleifend in in urna.</p>
					<div class="readmore-w3">
						<a class="readmore" href="#" data-toggle="modal"
							data-target="#myModal2">Read More</a>
					</div>
				</div>
				<div class="col-md-4 offer-grid ">
					<div class="icon">
						<i class="fa fa-university" aria-hidden="true"></i>
					</div>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Mauris ut metus sit amet magna vehicula eleifend in in urna.</p>
					<div class="readmore-w3">
						<a class="readmore" href="#" data-toggle="modal"
							data-target="#myModal2">Read More</a>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//offer-->
	<!--/team-->
	<div class="team" id="team">
		<div class="container">
			<h3 class="tittle">
				我们的 <span>教师团队</span>
			</h3>
			<div class="main">
				<div class="col-md-3 team-sec wow fadeInLeft animated animated"
					data-wow-delay=".5s">
					<div class="view fifth-effect">
						<a href="#" title="Full Image"><img src="images/t1.jpg"
							alt="image" /></a>
						<div class="mask"></div>

					</div>
					<div class="clearfix"></div>
					<div class="team-grid">
						<h4>Joe</h4>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
							sed diam nonummy.</p>
						<ul class="top-icons team-icon">
							<li><a href="#"><i class="fa fa-facebook"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-pinterest-p"
									aria-hidden="true"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 team-sec wow fadeInUp animated animated"
					data-wow-delay=".5s">
					<div class="view fifth-effect">
						<a href="#" title="Full Image"><img src="images/t2.jpg"
							alt="image" /></a>
						<div class="mask"></div>

					</div>
					<div class="clearfix"></div>
					<div class="team-grid">
						<h4>Adam</h4>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
							sed diam nonummy.</p>
						<ul class="top-icons team-icon">
							<li><a href="#"><i class="fa fa-facebook"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-pinterest-p"
									aria-hidden="true"></i></a></li>
						</ul>
					</div>
				</div>

				<div class="col-md-3 team-sec wow fadeInUp animated animated"
					data-wow-delay=".5s">
					<div class="view fifth-effect">
						<a href="#" title="Full Image"><img src="images/t3.jpg"
							alt="image" /></a>
						<div class="mask"></div>
					</div>
					<div class="clearfix"></div>
					<div class="team-grid">
						<h4>John</h4>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
							sed diam nonummy.</p>
						<ul class="top-icons team-icon">
							<li><a href="#"><i class="fa fa-facebook"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-pinterest-p"
									aria-hidden="true"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 team-sec wow fadeInRight animated animated"
					data-wow-delay=".5s">
					<div class="view fifth-effect">
						<a href="#" title="Full Image"><img src="images/t4.jpg"
							alt="image" /></a>
						<div class="mask"></div>
					</div>
					<div class="clearfix"></div>
					<div class="team-grid">
						<h4>Jack</h4>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
							sed diam nonummy.</p>
						<ul class="top-icons team-icon">
							<li><a href="#"><i class="fa fa-facebook"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"
									aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-pinterest-p"
									aria-hidden="true"></i></a></li>
						</ul>
					</div>

				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//team-->
	<!--services-->
	<div class="services-agileits" id="service">
		<div class="services-info">
			<!--Slider-->
			<div class="slider">
				<div class="callbacks_container">
					<ul class="rslides" id="slider">
						<li>
							<div class="slider-img">
								<img src="images/gallery1.jpg" class="img-responsive"
									alt="Real Plot">
							</div> <!--右边框-->
							<div class="col-md-5 services-right-agileinfo">
								<div class="right-header-w3ls">
									<h3 class="tittle">
										our <span>services</span>
									</h3>
									<p>Proin tincidunt imperdiet massa non aliquet. Nullam
										vestibulum sem vitae ante aliquam, eget aliquet sapien
										vehicula.</p>
								</div>
								<div class="service-grids-wthree">
									<div class="grid">
										<div class="service-icon">
											<i class="fa fa-home" aria-hidden="true"></i>
										</div>
										<h4>Lorem ipsum</h4>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing
											elit. Mauris ut metus sit amet magna vehicula eleifend in in
											urna.</p>
									</div>
								</div>
							</div> <!-- //右边框 -->
						</li>
						<li>
							<div class="slider-img">
								<img src="images/gallery3.jpg" class="img-responsive"
									alt="Real Plot">
							</div>
							<div class="slider-info">
								<span class="italic"> Pellentesque posuere</span>
								<h4>Nulla ac euismod libero.</h4>
								<h3>Quis nostrud exercitation</h3>
								<p>Quis autem vel eum iure reprehenderit qui in ea voluptate
									velit esse quam molestiae.</p>
							</div>
						</li>
						<li>
							<div class="slider-img">
								<img src="images/gallery1.jpg" class="img-responsive"
									alt="Real Plot">
							</div>
							<div class="slider-info">
								<span class="italic">Aenean sagittis convallis</span>
								<h4>Integer nec enim venenatis.</h4>
								<h3>Cupidatat non proident sunt</h3>
								<p>Excepteur sint occaecat cupidatat non proident, sunt in
									culpa qui officia deserunt.</p>
							</div>
						</li>
						<li>
							<div class="slider-img">
								<img src="images/gallery7.jpg" class="img-responsive"
									alt="Real Plot">
							</div>
							<div class="slider-info">
								<span class="italic">Pellentesque posuere</span>
								<h4>Nulla ac euismod libero.</h4>
								<h3>Voluptate velit esse</h3>
								<p>Quis autem vel eum iure reprehenderit qui in ea voluptate
									velit esse quam molestiae.</p>
							</div>
						</li>
					</ul>
				</div>

				<div class="clearfix"></div>
			</div>
			<!--//Slider-->
			<div class="clearfix"></div>
		</div>
	</div>
	<!--//services-->
	<!--footer-->
	<div class="footer">
		<div class="footer-head-agile">
			<ul>
				<li class="contact-agile"><span class="fa-icon-w3"><i
						class="fa fa-phone" aria-hidden="true"></i></span>CALL NOW : 040 123456
					789</li>
				<li class="logo-w3ls"><h2>
						<a href="index.html">Real Plot</a>
					</h2></li>
				<li class="mail"><span class="fa-icon-w3"><i
						class="fa fa-envelope" aria-hidden="true"></i></span>MAIL : <a
					href="mailto:info@example.com">INFO@EXAMPLE.COM</a></li>
			</ul>
		</div>
		<label></label>
		<div class="container">
			<div class="footer-content-agile">
				<div class="clearfix"></div>
				<div class="copy">
					<p>
						© 2016 Real Plot . All Rights Reserved | Design by <a
							href="http://w3layouts.com/">W3layouts</a>
					</p>
				</div>
			</div>
		</div>
	</div>
	<!--/footer -->
	<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			 */
			$().UItoTop({
				easingType : 'easeOutQuart'
			});
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span
		id="toTopHover" style="opacity: 1;"> </span></a>
	<!-- //smooth scrolling -->
	<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
</body>
</html>